<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">
    <input type="file" id="file" value="选择文件"/>
</form>
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
    $("#file").change(function () {
        var file = $("#file").get(0).files[0];
        // 查询是否有上传过
        // 这里应该是有一个查询的逻辑的,不在做了哈
        // 就直接冲第0个分片开始传了。
        var shardIndex = 0;
        uploadFile(file,shardIndex);
    })
    function uploadFile(file,shardIndex) {
        // 声明 文件信息和分片信息。
        // 注意:shardTotal是总分片数，即使后面有一点点字节，也要进行加1操作。避免丢了字节。
        var name = file.name,
            size = file.size,
            shardSize = 1024*1024*10,
            shardTotal = Math.ceil( size /shardSize);
        if(shardIndex >=shardTotal){
            return ;
        }
        var start = shardIndex*shardSize;
        var end = Math.min(start+shardSize,size);
        // 文件切割
        var packet = file.slice(start,end);
        var formData = new FormData();
        formData.append("file",packet);
                       // formData.append("hashCode",md5(file));
        formData.append("hashCode","1111");  // 这里应该进行hash运算。用111代替一下
        formData.append("fileName",name);
        formData.append("size",size);
        formData.append("shardIndex",shardIndex);
        formData.append("shardSize",shardSize);
        formData.append("shardTotal",shardTotal);
        // 通过ajax进行上传
        $.ajax({
            url:"http://localhost:8888/file/uploadVideo",
            type:"post",
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            success :function (data) {
                console.log(data);
                //这里进行循环调用，把所有的分片循环上传
                if(shardIndex<shardTotal){
                    shardIndex++;
                    uploadFile(file,shardIndex);
                }
            }
        });
    }
</script>

</html>